<template>
    <div class="wel-box" clearfix>
        <van-circle
            v-model:current-rate="timeCounter"
            :color="{
                '0%': '#fff7e6',
                '100%': '#ffd591'
            }"
            @click="closeTimer"
            :clockwise="false"
            size="42px"
            :text="`${Math.ceil(timeCounter / 20)}s`"
            class="my-timer"
            />
        <div class="titel">行秋智能采购管理系统</div>
        <div class="icon"><img src="../../../public/favicon.png"></div>
        <span class="wel">Hi ! Welcome !</span>
        <span class="text">「 路漫漫其修远兮，吾将上下而求索 」</span>
        <div class="right">powered by xingqiu &copy;2022-12</div>
    </div>
</template>
<script setup>
import { defineEmits,ref,onMounted } from "vue";
import { deCode } from "../../utils";
import { commonDefinition } from "../../store/index";
import { autoLoginApi, userRoleApi } from "../../apis/loginApi";
import { useRouter } from "vue-router";
    const emit = defineEmits(['onChange'])
    const _router = useRouter()

    const timeCounter = ref(0)
    const hasAutoLoginSuccess = ref(false) // 免登录是否成功
    const hasLogin = ref(true) // 免登录请求中
    const _timer = ref(0) // 倒计时的定时器对象

    onMounted(function() {
        // debugger
        let autoCache = localStorage.getItem('auto-login')
        if (autoCache) {
            try {
                autoCache = deCode(autoCache).split('---')
                let hasIn = (7 * 24 * 60 * 60 * 1000) - (Date.now() - autoCache[1]) > 0
                if (hasIn) {
                    autoLoginApi(autoCache[0]).then(async userInfo => {
                        /** 如果免登录成功--那么必须缓存用户信息，以及用户权限信息 */
                        if (userInfo.code === 200) {
                            commonDefinition().setToken(autoCache[0])
                            commonDefinition().setUserInfo(userInfo.data)
                            let userRights = await userRoleApi(userInfo.data.role)
                            commonDefinition().setUserRights(userRights.data)
                            hasAutoLoginSuccess.value = true
                        }
                        // 请求完成以后，免登录请求结束
                        hasLogin.value = false
                    })
                } else {
                    // 免登录请求结束
                    hasLogin.value = false
                }
            } catch {
                /** 解密报错了，免登录请求已经结束 */
                hasLogin.value = false
            }
        } else {
            hasLogin.value = false
        }

        _timer.value = setInterval(function() {
            timeCounter.value --;
            // console.log('------------------ 倒计时')
            if (timeCounter.value < 2) {
                clearInterval(_timer.value)
                if (hasAutoLoginSuccess.value) {
                    _router.push('/home')
                } else {
                    emit('onChange')
                }
            }
        }, 1000 / 20)
    })

    function closeTimer() {
        if (hasLogin.value) return
        clearInterval(_timer.value)
        if (hasAutoLoginSuccess.value) {
            _router.push('/home')
        } else {
            emit('onChange')
        }
    }

//  function my() {
//        // const router = useRouter()
//     // const _timer = ref(0)
//     // const timeCounter = ref(0)
//     // let _this = getCurrentInstance()
//     // const autoSuccess = ref(false)
//     // const hasLogin = ref(true) // 免登录请求中

//     // onMounted(function(){
//     //     // debugger
//     //     /**判断是否为免密登录 */
//     //      let autoToken  = localStorage.getItem('auto-login')
//     //      if(autoToken){
//     //        try{
//     //             autoToken = deCode(autoToken).split('---')

//     //             /**判断token7天是否过期 */
//     //             let SevenDay = ((7 * 24 * 1000 * 60 * 60) - (Date.now() - autoToken[1])) > 0
//     //             if(SevenDay){
//     //                 /**没过期 把token存入菠萝 */
//     //                 commonDefinition().setToken(autoToken[0])

//     //                 /**自动登录接口调用 成功存入用户信息、用户权限 */
//     //                 autoLoginApi().then(async function(res){
//     //                     if(res.code == 200){
//     //                         commonDefinition().setUserInfo(res.data)

//     //                         let rights = await userRoleApi(res.data.role)
//     //                         commonDefinition().setUserRights(rights)

//     //                         /**自动登录成功 */
//     //                         autoSuccess.value = true 
//     //                     }else{
//     //                         autoSuccess.value = false
//     //                     }
//     //                     hasLogin.value = false
//     //                 })
//     //             }else{
//     //                 hasLogin.value = false
//     //             }
//     //        }catch{
//     //             hasLogin.value = false
//     //        }
//     //      }else{
//     //         hasLogin.value = false
//     //      }

//     //     _timer.value = setInterval(function(){
//     //     timeCounter.value--
//     //         // console.log('timeCounter.value--',timeCounter.value--)
//     //         if(timeCounter.value < 2){
//     //             clearInterval(_timer.value)
//     //             if(autoSuccess.value){
//     //                 router.push('/home')
//     //             }else{
//     //                 _this.ctx.$emit('onChange')
//     //             }

//     //         }
            
//     //     },1000/20)
//     // })

//     // function clearTimer() {
//     //     /**如果免密请求还在请求 */
//     //     if(hasLogin.value) {return}
        
//     //     clearInterval(_timer.value)
//     //     if(autoSuccess.value){
//     //         router.push('/home') 
//     //     }else{
//     //         _this.ctx.$emit('onChange')
//     //     }
   
//     // }
//  }


</script>
<style lang="less" scoped>
@import '../../style/common.less';
    .wel-box{
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        background: linear-gradient(324deg, #f2995f,#f9e0c7 );
        overflow: hidden;
        >.icon{
            display: block;
            height: 120px;
            width: 120px;
            background: rgba(255, 222, 200, 0.89);
            border-radius: 50px;
            margin: auto;
            margin-top: 40px;
            box-shadow: 3px 3px 5px #d46b08;
            >img{
                margin: 8px 0 0 8px;
                height: 100px;
                width: 100px;
            }
        }
        >.titel{
            display: block;
            text-align: center;
            margin-top: 130px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 5px 5px 5px #d46b08;
        }
        >.wel{
            display: block;
            margin-top: 25px;
            text-align: center;
            color:#fef3e6 ;
            text-shadow: 2px 3px 10px #ba431b;
            font-size: 1.1rem;
        }
        >.text{
            display: block;
            margin-top: 50px;
            text-align: center;
            font-size: 0.9rem;
            font-weight: bold;
            color: #fafafa;
            text-shadow: 2px 3px 10px #ed7b2f;
        }
        >.right{
            display: block;
            margin-top: 170px;
            font-size: 0.8rem;
            text-align: center;
            color: #ffffff;
            // font-weight: bold;
        }
        >.my-timer{
            position: absolute;
            top: 5px;
            right: 5px;
        }
    }
</style>